<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="icons/iconfont.css"/>
		<style type="text/css">
			*{margin:0;padding:0;font-family: "微软雅黑";}
			ul,li{list-style: none;}
			a{text-decoration: none;}
			html,body{height:100%;}
			#out{height:100%;display: -webkit-box;-webkit-box-orient: vertical;}
			header{position:relative;height:80px;line-height: 80px;background:#ab1b1a;color:#fff;text-align: center;}
			header h1{font-size: 36px;font-weight: normal;}
			header a{position: absolute;right:20px;top:15px;display: block;width:105px;height:50px;line-height: 50px;border-radius:12px;box-shadow: 0 0 10px #333;color:#fff;}
			header a .aa{font-size: 36px;}
			article{-webkit-box-flex: 1;background: #f3f4f6;display: -webkit-box;-webkit-box-orient: vertical;}
			.navnav{background:#9a9fa5;line-height: 54px;height:54px;display: -webkit-box;text-align: center;}
			.navnav i{font-size:32px;color:#000;-webkit-box-flex: 1;display: block;}
			.navnav .whiteC{color:#fff;border-bottom: 5px solid #fff;}
			.products{-webkit-box-flex: 1;overflow: hidden;}
			.products ul{height:auto;overflow: hidden;}
			.products li{margin:15px 37px;float:left;width:246px;font-size: 22px;}
			.products li img{width:244px;height:244px;vertical-align:bottom;border:1px solid #ccc;}
			.products li span{display:block;width:246px;text-align: center;line-height: 32px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
			.products li p{height:auto;overflow: hidden;}
			.products li p i{color:#de4a4a;float:left;font-style: normal;}
			.products li p b{font-weight: normal;float:right;}
			footer{height:80px;padding-top:14px;background:#484850;display: -webkit-box;}
			footer span{-webkit-box-flex: 1;display: block;text-align: center;color:#fff;}
			footer a{color:#fff;}
			footer span b{display: block;line-height: 38px;font-size: 24px;font-weight: normal;}
			
			@media only screen and (min-width: 768px){			
				
				
				header{height:55px;line-height: 55px;}
				header h1{font-size: 24px;font-weight: normal;}
				header a{position: absolute;right:20px;top:10px;display: block;width:65px;height:35px;line-height: 35px;border-radius:8px;box-shadow: 0 0 10px #333;color:#fff;}
				header a .aa{font-size: 26px;}
				article{-webkit-box-flex: 1;background: #f3f4f6;display: -webkit-box;-webkit-box-orient: horizontal;}
				.navnav{width:180px;height:inherit;line-height:normal;background:#9a9fa5;display: -webkit-box;-webkit-box-orient:vertical;text-align: center;}
				.navnav i{font-size:24px;color:#000;-webkit-box-flex: 1;display: block;padding:10px 0;}
				.navnav .whiteC{color:#fff;border: 0;}
				.products{-webkit-box-flex: 1;overflow: hidden;}
				.products ul{height:auto;overflow: hidden;}
				.products li{margin:0;padding:15px 20px;float:left;width:238px;font-size: 20px;}
				.products li img{width:236px;height:236px;vertical-align:bottom;border:1px solid #ccc;}
				.products li span{display:block;width:238px;text-align: center;line-height: 32px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
				.products li p{height:auto;overflow: hidden;}
				.products li p i{color:#de4a4a;float:left;font-style: normal;}
				.products li p b{font-weight: normal;float:right;text-decoration: line-through;}
				footer{height:55px;background:#484850;display: block;padding-top: 0;}
				footer span{float:left;width:60px;height:50px;text-align: center;color:#eee;padding-top: 5px;}
				footer span b{display: block;line-height: 28px;font-size: 14px;font-weight: normal;}
				footer .redBg{background:#bf1b19;color:#fff;}
			}
		</style>
	</head>
	<body>
		<section id="out">
			<header>
				<h1>新品上市</h1>
				<a href="shopcar.html"><i class="iconfont aa">&#xe61b;</i></a>
			</header>
			<article>
				<nav class="navnav">
					
				</nav>
				<section class="products">
					<ul>						
					</ul>
				</section>
			</article>
			<footer>
				<span><a href="index1.html"><i class="iconfont">&#xe644;</i><b>首页</b></a></span>
				<span class="redBg"><a href="good.html"><i class="iconfont">&#xe692;</i><b>分类</b></a></span>
				<span><a href="shopcar.html"><i class="iconfont">&#xe61b;</i><b>购物车</b></a></span>
				<span><a href="myshow.html"><i class="iconfont">&#xe646;</i><b>我的秀</b></a></span>
				<span><i class="iconfont">&#xe660;</i><b>设置</b></span>				
			</footer>
		</section>
		
	</body>
	<script src="js/jquery183.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			addGoodlist();
			$('.navnav').on('click','i',function(){		//nav点击事件,事件委托，因为动态加载的且异步的
				$(this).addClass('whiteC').siblings().removeClass('whiteC');
				var thisID=$(this).data('classid');
				addGoodlist(thisID);
			})			
			
//			setTimeout(function(){     //这里加个延迟，不然第一次无法滑动，需要等图片列表生成高度
//				
//			},500)
			$('.products ul').on('tap','li',function(){
				localStorage.setItem('goodID',$(this).data('goodid'));
				window.open('good.html');
			})
			$.ajax({		//生成nav图标
				type:"get",
				url:"http://datainfo.duapp.com/shopdata/getclass.php",
				async:true,
				dataType:'json',
				success:function(data){
					$.each(data, function(i) {
						$('<i>').addClass('iconfont').html(data[i].icon).data("classid",data[i].classID).appendTo($('.navnav'));
						console.log(data[i].classID);
					});
					$('.navnav i:eq(0)').addClass('whiteC');
				}
			});
			function addGoodlist(classID){
				$('.products ul').html("");
				$.ajax({		//生成商品列表
					type:"get",
					url:"http://datainfo.duapp.com/shopdata/getGoods.php",
					async:true,
					dataType:'jsonp',
					data:{classID:classID},
					success:function(data){
						$.each(data, function(i) {
							var iLi=$('<li>').data('goodid',data[i].goodsID).appendTo($('.products ul'));
							var iA=$('<a>').attr({href:"good.html"}).css({display:"block"}).appendTo(iLi);
							$('<img>').attr({src:data[i].goodsListImg}).appendTo(iA);
							$('<span>').text(data[i].goodsName).appendTo(iLi);
							var iP=$('<p></p>').appendTo(iLi);						
							$('<i>').text("¥"+data[i].price).appendTo(iP);
							if(data[i].discount==0){
								data[i].discount=10;
							}
							var iPrice=parseInt(data[i].price/data[i].discount*10);
							$('<b>').text(iPrice).appendTo(iP);
							var myScroll=new IScroll('.products',{
								    mouseWheel: true,
								    scrollbars: true
							});
						});
				}
			});
			}
			
			
			
		})
		function bodyScale(n){	//屏幕宽度自适应
			var devicewidth=document.documentElement.clientWidth;
			var scale=devicewidth/n;
			document.body.style.zoom=scale;
		}
		window.onload=window.onresize=function(){
			if($('html').width()<768){
				bodyScale(640);
			}else{
				bodyScale(1024);
			}
			
		}
	</script>
</html>
